<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px;
				width: 300px;
				height: 400px;
				position: relative;
			}
			#small_box{
				position: relative;
				width: 300px;
				height: 400px;
			}
			#mask{
				position: absolute;
				width: 120px;
				height: 140px;
				background-color: #DDDDDD;
				opacity: 0.3;
				border: 1px solid;
				top: 0;
				left: 0;
				display: none;
			}
			#big_box{
				position: absolute;
				left: 370px;
				top: 0px;
				width: 300px;
				height: 400px;
				overflow: hidden;
				display: none;
			}
			#big_img{
				z-index: 5;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="small_box">
				<img src="samll.jpg" >
				<span id="mask">
					
				</span>
			</div>
			<div id="big_box">
				<img src="big.jpg" id="big_img">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var box = document.getElementById('box')
			var mask = document.getElementById('mask')
			var small_box = document.getElementById('small_box')
			var big_box = document.getElementById('big_box')
			var big_img = document.getElementById('big_img')
			box.onmouseover = function(){
				mask.style.display = 'block';
				big_box.style.display = 'block';
				small_box.onmousemove = function(e){
					e = e || event;
					//  鼠标相对盒子移动的距离 = 
					var moveX = e.clientX - box.offsetLeft - small_box.offsetLeft - mask.offsetWidth * 0.5;
					var moveY = e.clientY - box.offsetTop - small_box.offsetTop - mask.offsetHeight * 0.5;
					if(moveX <= 0){
						moveX = 0;
					}else if(moveX > small_box.offsetWidth - mask.offsetWidth){
						moveX = small_box.offsetWidth - mask.offsetWidth;
					}
					if(moveY <= 0){
						moveY = 0;
					}else if(moveY > small_box.offsetHeight - mask.offsetHeight){
						moveY = small_box.offsetHeight - mask.offsetHeight;
					}
					mask.style.left = moveX + 'px';
					mask.style.top = moveY + 'px';
					
					
					var big_box_moveX = moveX / (small_box.offsetWidth - mask.offsetWidth);
					var big_box_moveY = moveY / (big_img.offsetWidth - big_box.offsetWidth);
					big_img.style.left = - big_box_moveX * (big_img.offsetWidth - big_box.offsetWidth) + 'px';
					big_img.style.top = - big_box_moveY * (big_img.offsetHeight - big_box.offsetHeight) + 'px';
				}
			}
			box.onmouseout = function(){
				mask.style.display = 'none';
				big_box.style.display = 'none';
			}
			
			
		
		
		
		
		
		
		
		
		}
		
	</script>
</html>
